import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Spin, message , Modal ,Button} from 'antd';
import axios from 'axios';
// import { Card, Row, Col, Spin, message, Modal } from 'antd';

const Recommendations = () => {
  const [recommendations, setRecommendations] = useState([]);
  const [loading, setLoading] = useState(true);
    // 新增状态
  const [selectedPlaylist, setSelectedPlaylist] = useState(null);
  const [modalVisible, setModalVisible] = useState(false);

  useEffect(() => {
    const user = window.localStorage.getItem('loggedUser');
    if (!user) {
      message.warning('请先登录查看推荐');
      return;
    }

    axios.get('http://localhost:5000/recommendations', {
      params: { username: user }
    })
    .then(res => {
      if (res.data.success) {
        setRecommendations(res.data.data);
      } else {
        message.error(res.data.error || '推荐加载失败');
      }
    })
    .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return <Spin tip="加载推荐中..." />;
  }

  return (
    <div className="recommendation-container">
      <h2 style={{ marginBottom: 24 }}>根据你的收藏推荐</h2>
      <Row gutter={[16, 16]}>
        {recommendations.map(playlist => (
          <Col key={playlist.name} xs={24} sm={12} md={8} lg={6}>
            <Card
              hoverable
              onClick={() => {
                setSelectedPlaylist(playlist);
                setModalVisible(true);
              }}
              cover={<div className="playlist-cover" style={{
                height: 150,
                background: `linear-gradient(45deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)})`
              }} />}
            >
              <Card.Meta
                title={playlist.name}
                description={
                  <>
                    <p>类型: {playlist.type}</p>
                    <p>🔥 热度评分: {(
                      playlist.play_count * 0.5 +
                      parseInt(playlist.favorite_count) * 0.3
                    ).toFixed(0)}</p>
                  </>
                }
              />
            </Card>
          </Col>
        ))}
      </Row>
      <Modal
        title={selectedPlaylist?.name || "歌单详情"}
        visible={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={[
          <Button key="close" onClick={() => setModalVisible(false)}>
            关闭
          </Button>
        ]}
        width={600}
      >
        {selectedPlaylist && (
          <div className="playlist-detail">
            <p><strong>类型:</strong> {selectedPlaylist.type || '未知类型'}</p>
            <p><strong>创建时间:</strong> {selectedPlaylist.created_date || '未知类型'}</p>
            <p><strong>分享次数:</strong> {selectedPlaylist.share_count || '未知类型'}</p>
            <p><strong>评论:</strong> {selectedPlaylist.comment_count || '未知类型'}</p>
            <p><strong>播放次数:</strong> {selectedPlaylist.play_count || 0}</p>
            <p><strong>收藏次数:</strong> {selectedPlaylist.favorite_count || 0}</p>
            <p><strong>热度评分:</strong> {(
              selectedPlaylist.play_count * 0.5 +
              parseInt(selectedPlaylist.favorite_count) * 0.3
            ).toFixed(0)}</p>
            {/* 可根据需要扩展更多字段 */}
          </div>
          )}
      </Modal>
    </div>
  );
};

export default Recommendations;